<template>
  <div>

    <!-- 模糊搜索的表单 -->
    <el-form 
    @submit.native.prevent
    :inline="true" class="demo-form-inline">
      <el-form-item label="订单名字">
        <el-input
        @keyup.native.enter="search" v-model="oname"  placeholder="请输入订单名称关键字"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-divider content-position="left">订单列表</el-divider>

    <!-- 表格 -->
    <el-table :data="orderData.result">
      <el-table-column  width="100"  align="center" prop="oid" label="订单编号"></el-table-column>
      <el-table-column align="center"
       prop="oname"  width="250"
      label="商品详细名称">
      </el-table-column>
      <el-table-column width="250" align="center" prop="properties" label="商品属性">
      </el-table-column>
      <el-table-column width="100" align="center" prop="price" label="商品价格">
      </el-table-column>
      <el-table-column width="80"  align="center" prop="num"  label="商品数量">
      </el-table-column>
      <el-table-column width="200px" align="center" label="操作">
      <template slot-scope="scope">
        <el-button size="small" @click="$router.push(`/home/mall-order-update/${scope.row.oid}`)" type="warning" circle icon='el-icon-edit' ></el-button>
        <el-button size="small" type="danger" circle icon='el-icon-delete' @click="delOrder(`${scope.row.oid}`)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 分页器 -->
    <br>
    <el-pagination
    @size-change="handleSizeChange"
      @current-change="changeCurrentChange"
      :current-page.sync="currentPage"
  background
  :page-sizes="[2, 4, 6, 8,10]"
  :page-size="orderData.pagesize"
  :total="orderData.total"
  layout="->,sizes,prev, pager, next,total,jumper"
  >
</el-pagination>
  </div>
</template>

<script>
import httpApi from '@/http'
  export default {
    data() {
      return {
        currentPage: 5,
        oname: '',
        orderData:{//存储电影列表相关信息
          page:1,//当前页
          pagesize:3,//每页多少条
          total:0,//总条目数
          result:[]//存储具体列表
        },
      }
    },
    methods: {
      /** 查询订单列表 */
      list() {
        let params={page:this.orderData.page,pagesize:this.orderData.pagesize}
        //发送http请求: /orders
         httpApi.MallApi.queryOrderList(params).then(res=>{
         //  console.log(res);
           this.orderData=res.data.data
         //  console.log(this.orderData);
         })
      },
      /** 删除oid对应的订单 */
      delOrder(oid){
        console.log(oid);
        this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          httpApi.MallApi.deleteOrder({oid}).then(res=>{
            console.log(res);
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.list()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(pagesize) {
       //console.log(`每页 ${pagesize} 条`);
        this.orderData.pagesize=pagesize //修改当前页码后，查询订单列表
       //console.log(this.orderData.pagesize);
        this.list()
      },
      /** 当分页器当前页改变时执行 */
      changeCurrentChange(page) {
        //console.log(`当前页: ${page}`);
        this.currentPage=page
        this.orderData.page=page //修改当前页码后，查询电影列表
      //  console.log(this.orderData.page);
        this.search()
      },
      listOrderByname(){
        let params={oname:this.oname.trim(),page:this.orderData.page,pagesize:this.orderData.pagesize}
        httpApi.MallApi.queryOrderLike(params).then(res=>{
         this.orderData=res.data.data
         console.log(this.orderData);
        })
      },
      search() {
        if(this.oname.trim()==''){
          this.list()
        }else{
          this.listOrderByname()
        }
      },
    },
    mounted(){
      this.list()
    //  this.initMap()
    }
  }
</script>

<style lang="scss" scoped>

</style>